<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>hello</title>
	<script type="text/javascript" src="${pageContext.servletContext.contextPath }/js/jquery.js"></script>
</head>
<body>
	hello
	<br>
	<br>
	<form action="${pageContext.servletContext.contextPath }/addUser" method="post">
		username:<input type="text" name="username"><br>
		userpass:<input type="password" name="userpass"><br>
		userbirth:<input type="text" name="userbirth"><br>
		<input type="submit" value="提交">
	</form>
	
	<br>
	<br>
	
	<table border="1">
		<thead>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>出生日期</th>
			</tr>
		</thead>
		<tbody id="userview"> 
			<c:if test="${allUser!=null }">
				<c:forEach items="${allUser }" var="user">
					<tr>
						<td>${user.username }</td>
						<td>${user.userpass }</td>
						<td>${user.userbirth }</td>
					</tr>
				</c:forEach>
			</c:if>
		</tbody>
	</table>

	<div id="view" >
		<button onclick="pageChange(this)" value="上一页">上一页</button>
		<button onclick="pageChange(this)" value="首页">首页</button>
		<span>当前第</span><span id="curePage">1</span><span>页</span>
		<button onclick="pageChange(this)" value="尾页">尾页</button>
		<button onclick="pageChange(this)" value="下一页">下一页</button>
		<span>跳转到</span><input type="text" id="goto"><span>页</span>
		<button onclick="pageChange(this)" value="确定">确定</button>
		<span>总共</span><span id="totalPage">
		<c:if test="${totalPage!=null }">
			${totalPage }
		</c:if>
		</span><span>页</span>
	</div>
	
	<script type="text/javascript">
		
		 function pageChange(){//分页
			var pageObj = arguments[0];
			var curePage = parseInt($("#curePage").text());//当前页面
			var totalPage = parseInt($("#totalPage").text());//总共页面
			if(pageObj.value === '上一页'){
				if(curePage>1){
					curePage=curePage-1;
				}
			}else if(pageObj.value === '下一页'){
				if(curePage<totalPage){
					curePage=curePage+1;
				}
			}else if(pageObj.value === '首页'){
				curePage=1;
			}else if(pageObj.value === '尾页'){
				curePage=totalPage;
			}else if(pageObj.value === '确定'){
				curePage = parseInt($("#goto").text());
			}
			
			if(curePage != parseInt($("#curePage").text())){
				var start = (curePage-1)*5;
				var rows = curePage*5;
				var pageObj = {'start':start,'rows':rows};
				var pageJSON = JSON.stringify(pageObj);
				$.ajax({
					url:"${pageContext.servletContext.contextPath }/pageChange",
					type:'post',
					contentType:'application/json',
					data:pageJSON,
					success: function(data){
						$("#curePage").text(curePage);
						var dataObj = JSON.parse(data);
						$("#userview").empty();
						for(var i = 0;i<dataObj.length;i++){
							var trObj = $("<tr></tr>");
							var nameObj = $("<td>"+dataObj[i].username+"</td>");
							var passObj = $("<td>"+dataObj[i].userpass+"</td>");
							var birthObj = $("<td>"+dataObj[i].userbirth+"</td>");
							trObj.append(nameObj);
							trObj.append(passObj);
							trObj.append(birthObj);
							$("#userview").append(trObj);
						}
					}
				});
			}
		} 
	
	</script>
	
</body>
</html>



